<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	
	<title>Concert-Deals</title>
	<link type="text/css" href="style_sheet/style.css" rel="stylesheet" media="screen" />
	<link type="text/css" href="jquery-ui/css/blitzer/jquery-ui-1.8.custom.css" rel="Stylesheet" />
	<link type="text/css" href="theme/jquery.ui.all.css" rel="stylesheet" />
	
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="jquery-ui/js/jquery-ui-1.8.custom.min.js"></script>
	<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="ui/jquery.ui.mouse.js"></script>
	<script type="text/javascript" src="ui/jquery.ui.sortable.js"></script>
	<script type="text/javascript" src="ui/jquery.ui.accordion.js"></script>

	<script type="text/javascript">
		$(function() {
			var stop = false;
			$("#accordion h3").click(function(event) {
				if (stop) {
					event.stopImmediatePropagation();
					event.preventDefault();
					stop = false;
				}
			});
			$("#accordion").accordion({
				autoHeight: true,
				collapsible: true,
				header: "> div > h3"
			}).sortable({
				axis: "y",
				handle: "h3",
				stop: function(event, ui) {
					stop = true;
				}
			});
		});
		</script>
	
		<style type="text/css">
			#following_list #info{
			float: left;
			margin-right: 10px;
			margin-top: 10px;
			}
			#show_list #info{
			float: left;
			margin-right: 10px;
			margin-top: 10px;
			}
		</style>

		<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
		<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
		<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
		<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
		<script type="text/javascript">	
			var all_artists = ["Hello", "Hi" , "Whats" , "Up"];		
			$(document).ready(function() {
				$("#following_list").html('<center><img aliign= "center" src="jquery-ui/images/ajax-loader.gif" /></center>');
				refreshFollowList()
				
				$("#search_event_artist").live("click",
				function(e){
					name = $(this).attr('artist');
					top.location.href = 'http://apps.facebook.com/concert-deals/concert_search?artist=' + name;
				});
				
				$("#home_page").click(function(e){
					top.location.href = 'http://apps.facebook.com/concert-deals'
				});
				
				
				$("#search_page").live("click",
				function(e){
					top.location.href = 'http://apps.facebook.com/concert-deals/concert_search'
				});
				
				$("#track_page").click(function(e){
					top.location.href = 'http://apps.facebook.com/concert-deals/view_tracks'
				});
				
				
				$('#search_artist').click(function(e) {
	            	e.preventDefault();
	            	getArtistList();
	        	});
				//Get the list of all artists in the database
				$.post("/all_artists", {},
				function(data) { 
					all_artists = data;
					$("#artist_search").autocomplete(data, {
							formatItem: function(item) {
							return item.name;
							}
					}).result(function(event, item) {
								addArtist(item.name,item.id)
					});
				}, 'json');
				
	        });
			function getUrlVars()
			{
			    var vars = {};
			    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
			    for(var i = 0; i < hashes.length; i++)
			    {
			        hash = hashes[i].split('=');
					
			        vars[hash[0]] = hash[1];
			    }
			    return vars;
			}
			function getArtistList(){
				$.post("/get_artists?artist=" + $('#artist_search').val(),{}, function(data){
				
					var artistHTML = "<div id =\"show_list\" >";
					
					for (var i = 0; i < data.length; ++i) {
						var artist = data[i];
						artistHTML += "<div id = \"info\" >" ;
						artistHTML += "<a href=\"javascript:addArtist('" + artist.name + "','')\">";
						artistHTML += "<img src=\"" + artist.image + "\" height=\"100\" width = \"100\" \> <br>";
						artistHTML += '<p style="width:100; font-size:xx-small" >' ; 
						artistHTML += artist.name + "</p></a></div>";
					}
					
					artistHTML += "</ul>";
					
					$("#artist_list").html(artistHTML);
					
				}, 'json');
			}
			
			function addArtist(name,id){
				a = getUrlVars();
				a['name'] = name;
				a['id'] = id;
				$.post("/add_artist",a, function(data){
					if (data[0]) {
						if (data[1]) {
							//$("#following_list").append('<li> <a href="/concert_search?artist=' + name + '">' + name + "</a></li>");
							refreshFollowList()
							publish(name);
						}
						$("#artist_list").html("");
					}
					else{
						top.location.href=data[1];
					}
				}, 'json');
				
			}
			
			function redir_main_page(){
				top.location.href = "http://apps.facebook.com/concert-deals";
			}
			function remArtist(name){
				a = getUrlVars();
				a['artist'] = name;
				$.post("/remove_artist", a, function(data){
					if (data[0]) {
						$("#unfollow_" + data[1]).html("Unfollowed");
						$("#commit_changes").html('<a href=# onclick = "commitRemove()"> Commit Unfollow changes</a>');
					}
					else{
						top.location.href = data[1];
					}
				}, 'json');
			}
			
			function commitRemove(){
					a = getUrlVars();
					a['save'] = 'true';
					$.post("/remove_artist", a, function(data){
						refreshFollowList()
				}, 'json');
			}
			
			function refreshFollowList(){
				a = getUrlVars();
				$.post("/follow_list", a, function(data){
					if (data[0]) {
						artists = data[1]
						followHtml = "";
						if(data[2]){
							followHtml += '<a href=# onclick = "commitRemove()"> Commit Unfollow changes</a><br>';
						}
						for (var i=0; i < artists.length ; i++ ){
							artist = artists[i];
							followHtml += '<div id="info">';
							followHtml +=  '<a id="search_event_artist" artist="' + artist['name']+  '" href="#">';
							followHtml += '<img align="center" src="' + artist['img'] + '" height="100" width="100"/>'; 
							followHtml += '<br> <p style="width:100" >'  +  artist['name'] +  '</p></a>' ;
							followHtml += '<span id="unfollow_' + artist['name_id'] + '">';
							if (artist['uf']){
								followHtml += 'Unfollowed';
							}
							else{
								followHtml += '<input type="button" value="Unfollow" onclick="remArtist(\'' + artist['name'] + '\')"/>';
							}
							followHtml += '</span></div>';
						}
						
						$("#following_list").html(followHtml);													
					}
					else{
						top.location.href = data[1];
					}
				}, 'json');
			}
			
	</script>
</head>
<body>
	<script src="http://connect.facebook.net/en_US/all.js"></script>

	<script type="text/javascript">
		function publish(artist) {
		 var attachment = {
		'name':'ConcertDeals',
     	'href':'http://apps.facebook.com/concert-deals',
     	'caption':"{{name}} just started following " + artist +" on Concert Deals",
		 }
		 
		 var action_links = [{'text':'Get Great Concert Deals','href':'http://apps.facebook.com/concert-deals'}]
		   FB.init({appId: '102d3b67b1e319439396fed4c2e0eb58', xfbml: true});
		   FB.ui(
			   {
			     method: 'stream.publish',
			     message: "just started following " + artist +" on Concert Deals http://apps.facebook.com/concert-deals ",
			    },{}
			 );

		 /*
		 FB_RequireFeatures(["Connect"], function() {
		   FB.init('102d3b67b1e319439396fed4c2e0eb58', 'xd_receiver.htm');
		   FB.ensureInit(function() {
		     FB.Connect.streamPublish('',attachment,action_links);
		   });
		 }); */
		}
		
	</script>
	
	<!-- end #header -->
	<div id="menu">
		<ul>
			<li class="first"><a href="#" id="home_page">Home</a></li>
			<li><a href=# id="search_page">Search</a></li>
			<li><a href=# id="track_page">Tracks</a></li>
		</ul>
	</div>
	<!-- end #menu -->
	
	<br><br>
	<div id="wrapper">
	<div class="btm">
	<div id="page">
		
		&nbsp;&nbsp;Hi {{name}}!
		
		<div id="artists">
			<div id="accordion">
			<div>
				<h3><a href="#">Artists Following</a></h3>
				<div id="following">
						<div id="commit_changes"> </div>
						<div id="following_list">
							<br><br><br><br><br><br><br><br><br><br><br><br>
						</div>
				</div>
			</div>
			<div>
				<h3><a href="#">Add Artist</a></h3>
				<div id="add_artist">
					<form>
						Add Artist:<input id="artist_search" />
						<input type="button" value="search" id="search_artist">
					</form>
					<div id="artist_list">
						
					</div>
				</div>	
			</div>
			</div>
		</div>
	</div>
	<!-- end #page -->
	</div>
	</div>
	
</body>	
</html>